<template>
  <view class="tab-box">
    <view v-for="(tab, index) in tabs" :key="index" class="tab-item">
      <text @click="handleClick(index)" :class="{ 'tab-text-active': activeIndex === index }">{{
        tab.label
      }}</text>
      <view
        class="tab-check"
        v-if="activeIndex === index"
        :class="{ 'tab-check-active_bar': activeIndex === index }"
      >
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  tabs: {
    type: Array,
    required: true,
  },
  initialIndex: {
    type: Number,
    default: 0,
  },
  onChange: {
    type: Function,
    default: () => {},
  },
})
const emit = defineEmits(['change'])
const activeIndex = ref(props.initialIndex)
watch(
  () => props.initialIndex,
  (newIndex) => {
    activeIndex.value = newIndex
  },
)
const handleClick = (index) => {
  activeIndex.value = index
  emit('change', index)
}
</script>

<style lang="scss" scoped>
.tab-box {
  display: flex;
}
.tab-item {
  position: relative;
  padding: 2vh 3vh;
  text-align: center;
}
.tab-item {
  font-size: 4vw;
  line-height: 4vw;
  display: block;
}

.tab-text-active {
  font-size: 6vw;
  font-weight: 700;
  transition: all 0.2s;
}

.tab-check {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50px;
  width: 2vh;
  height: 1vh;
  background-color: rgb(64, 191, 207);
}

@keyframes bar {
  0% {
    width: 0%;
  }

  100% {
    width: 4vh;
  }
}
.tab-check-active_bar {
  animation: bar 0.3s both;
}
</style>
